<template>
  <div class="ltvAnalysis">
    <!-- 顶部区域 具有 抽样参数 近似计算参数 -->
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>LTV分析</span>
        <span class="tool_main">
          <!--                  <span class="save" @click="dialog_save=true">-->
          <!--                    <i class="el-icon-folder-add"></i>-->
          <!--                    保存-->
          <!--                  </span>-->
          <!--                  <i class="fgf"></i>-->
          <el-tooltip
            class="tool_son"
            effect="light"
            content="刷新"
            placement="bottom"
          >
            <i class="el-icon-refresh"></i>
          </el-tooltip>
          <el-tooltip
            class="tool_son"
            effect="light"
            content="下载数据"
            placement="bottom"
          >
            <i class="el-icon-download" @click="exportExcel"></i>
          </el-tooltip>
        </span>
      </header>
    </div>

    <!-- 筛选项区 start -->
    <div class="filterBox">
      <div class="viewFunnelBox">
        <!-- 初始事件 start -->
        <div class="step-wrap">
          <template v-if="isInitEvent">
            <!--        序号+1-->
            <div class="lineHeader">初始事件</div>
            <div style="position: relative; height: 32px">
              <!--        选择框-->
              <el-button
                icon="el-icon-full-screen"
                size="small"
                @click="choInitEvent()"
                >{{ currentInitEventGroup.cname || "请选择" }}
              </el-button>
              <!--          内置选择框-->
              <options
                v-if="showInitEventGroup"
                :initEventGroupDetail="initEventGroupDetail"
                v-clickoutside="handleClickOutSide"
                :initEventGroup="initEventGroup"
                :currentEvent="currentInitEventGroup"
                @choInitEventEnd="choInitEventEnd"
              ></options>
            </div>
            <div style="margin-left: 10px">
              <el-button
                type="text"
                icon="el-icon-plus"
                size="small"
                @click="editCondInit"
                >筛选
              </el-button>
            </div>
            <div style="margin-left: 10px">
              <!--                            <el-button type="text" icon="el-icon-refresh" size="small"-->
              <!--                                       @click="isInitEvent=!isInitEvent">切换为用户属性-->
              <!--                            </el-button>-->
            </div>
          </template>
          <template v-else>
            <div class="lineHeader">成为会员时间</div>
            <div style="position: relative">
              <el-select
                v-model="currentBecomeVipTimeValue"
                placeholder="请选择"
                size="mini"
                value-key="cname"
              >
                <el-option
                  v-for="item in becomeVipTimeList"
                  :key="item.name"
                  :label="item.cname"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
            <div style="margin-left: 10px">
              <el-button
                type="text"
                icon="el-icon-refresh"
                size="small"
                @click="isInitEvent = !isInitEvent"
                >切换为事件
              </el-button>
            </div>
          </template>
        </div>
        <template v-if="isInitEvent">
          <CustomScreen
            :ref="`customScreenRefInit`"
            :supName="currentInitEventGroup.eventId"
            :isSupName="true"
          ></CustomScreen>
        </template>
      </div>

      <div class="viewFunnelBox">
        <div class="step-wrap">
          <div class="lineHeader">营收事件</div>
        </div>
        <div
          class="steps"
          v-for="(mes, index) in revenueEventItems"
          :key="mes.key"
        >
          <div class="step-wrap">
            <!--        选择框-->
            <div style="position: relative; height: 32px; margin-left: 10px">
              <el-button
                icon="el-icon-full-screen"
                size="small"
                @click="cho(mes, 0)"
              >
                {{ mes.mes.cname || "请选择" }}
              </el-button>
              <!--          内置选择框-->
              <options
                v-if="mes.act"
                @choInitEventEnd="choInitEventEnd"
                v-clickoutside="handleClickOutSide"
                :origin="mes"
                :initEventGroupDetail="initEventGroupDetail"
                :initEventGroup="initEventGroup"
                :currentEvent="mes.mes"
              ></options>
            </div>

            <div style="margin-left: 10px; font-size: small">的</div>

            <!--          <el-button type="text" icon="el-icon-plus" size="small" @click="editCond(index)">自定义筛选条件</el-button>-->

            <div style="margin-left: 10px">
              <el-button
                icon="el-icon-full-screen"
                size="small"
                @click.stop="cho(mes, 1)"
                >{{ mes.attribute.cname || "请选择" }}
              </el-button>
              <CategoryFiltering
                v-if="mes.showAttribute"
                @choAttributeEnd="choAttributeEnd"
                :origin="mes"
                v-clickoutside="handleClickOutSide"
                :tabsBodyParams="mes.tabsBodyParams"
                :tabsHeadParams="mes.tabsHeadParams"
              ></CategoryFiltering>
            </div>

            <template v-if="revenueEventItems[index].showPercentage">
              <InputNumber
                style="margin-left: 20px"
                v-model="revenueEventItems[index].percentage"
                size="small"
                :min="1"
                :max="100"
                :slotNumber="'%'"
                controls-position="right"
              ></InputNumber>
            </template>

            <div style="margin-left: 10px">
              <el-button
                type="text"
                icon="el-icon-pie-chart"
                size="small"
                @click="isShowPercentage(index)"
                >添加利润比率
              </el-button>
            </div>

            <div style="margin-left: 10px">
              <el-button
                type="text"
                icon="el-icon-plus"
                size="small"
                @click="editCond(index)"
                >筛选
              </el-button>
            </div>

            <el-button
              type="text"
              style="margin-left: 98%; position: absolute"
              v-if="revenueEventItems.length > 1"
              class="el-icon-delete"
              @click="remvnoCond(index)"
            ></el-button>
          </div>

          <CustomScreen
            :ref="`customScreenRef${index}`"
            :supName="mes.mes.eventId"
            :isSupName="true"
          >
          </CustomScreen>

          <!--                                  :supName="revenueEventItems[index].mes.name"-->
        </div>
        <div class="step-wrap">
          <div class="lineHeader">
            <el-button
              type="text"
              icon="el-icon-circle-plus"
              @click="addLtvAnalysisEvent"
            >
              事件
            </el-button>
          </div>
        </div>
      </div>

      <div class="viewFunnelBox">
        <CustomScreen
          :ref="`customScreenRefUser`"
          :isSupName="false"
          :isEvent="'false'"
        ></CustomScreen>
        <div class="step-wrap">
          <div class="lineHeader">
            <el-button
              type="text"
              icon="el-icon-plus"
              size="midden"
              @click="editCondUser()"
              >用户筛选
            </el-button>
          </div>
        </div>
      </div>
      <!-- 筛选项区 end -->

      <div class="viewFunnelBoxLast">
        <div class="step-wrap">
          <div class="lineHeader">
            <div style="font-size: small">按</div>

            <div style="margin-left: 10px">
              <el-button
                icon="el-icon-full-screen"
                size="small"
                @click="
                  showbyXXXReadtabsBodyParams = !showbyXXXReadtabsBodyParams
                "
              >
                {{ byXXXReadValues.cname || "请选择" }}
              </el-button>
              <CategoryFiltering
                v-if="showbyXXXReadtabsBodyParams"
                @choAttributeEnd="choAttributeEnd"
                v-clickoutside="handleClickOutSide"
                :origin="{ key: 'byXXXRead' }"
                :haveTotal="'true'"
                :tabsHeadParams="byXXXReadtabsHeadParams"
                :tabsBodyParams="byXXXReadtabsBodyParams"
              ></CategoryFiltering>
            </div>

            <div style="font-size: small; margin-left: 10px">查看</div>

            <div style="margin-left: 10px; position: absolute; right: 30px">
              <el-button
                type="primary"
                :icon="icon"
                :disabled="isDoCompute !== 0"
                size="small"
                style="width: 192px; margin-right: -30px"
                @click="searchLtv()"
                >分析计算
                <template v-if="icon === 'el-icon-loading'"
                  >({{ backTime }}s)</template
                >
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区 start -->
    <div class="contentBox">
      <div class="childFilterBox">
        <!-- 切换视图 趋势 | 对比 -->
        <el-radio-group v-model="state" size="mini" @change="stateChange()">
          <el-radio-button :label="'trends'">趋势</el-radio-button>
          <el-radio-button :label="'contrast'">对比</el-radio-button>
        </el-radio-group>

        <div class="contrastFunnelBox"></div>

        <!-- 窗口期 -->
        <div class="winPeriodBox">
          <timeRestrict
            :oldTime="dateS"
            :timeRestrict="timeRestrict"
            @change="dateSChange"
          ></timeRestrict>
        </div>

        <el-select
          v-if="state === 'contrast'"
          size="mini"
          v-model="currentContrastStep"
          placeholder="请选择"
          style="max-width: 100px; float: right"
        >
          <el-option
            v-for="item in contrastStep"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="childFilterBox">
        <el-container>
          <div id="chart" style="width: 100%; height: 60vh"></div>
        </el-container>
        <el-divider></el-divider>
        <TableFunnel
          :byXXXReadValues="byXXXReadValues"
          :ltvReportResData="initChartViewData"
          :ltvReportByValues="ltvReportByValues"
          :state="state"
          ref="exportExcel"
          :currentContrastStep="currentContrastStep"
        ></TableFunnel>
      </div>
    </div>
  </div>
</template>

<script>
/*  下拉框 */
import options from "./options";

/*  数据资料 */
import DataTypeConfig from "./dataType.config.js";

/*  表格展示组件 */
import TableFunnel from "./tableFunnel";

/*  营收事件一级筛选项 */
import CustomScreen from "./customScreen";

/*  类别筛选 */
import CategoryFiltering from "./categoryFiltering";

/*添加利润比率框*/
import InputNumber from "./input-number";

//当鼠标点击了指令所绑定元素的外部时，就会触发绑定方法所需要的控件
import clickoutside from "element-ui/src/utils/clickoutside";

import TimeSelect from "./timeSelect";
/**
 * api 接口
 * */
import {
  propertyList,
  thinglGroup,
  thinglList,
  ltvFunnel,
} from "./api.config.js";

export default {
  directives: { clickoutside },
  name: "ltvAnalysis",
  components: {
    options,
    TableFunnel,
    CustomScreen,
    CategoryFiltering,
    InputNumber,
    "ml-time-select": TimeSelect,
  },
  data() {
    return {
      /* 点击分析计算切换图表 */
      icon: "el-icon-search",
      /* 分析计算倒计时*/
      backTime: 60,
      /* 是否正在计算中*/
      isDoCompute: 0,
      dateS: [], // 开始时间段
      /* 当前选择的成为会员时间类型*/
      currentBecomeVipTimeValue: {},
      /* 成为会员时间数组*/
      becomeVipTimeList: [],
      /* 用于记录是否为初始事件 否则为初始时间*/
      isInitEvent: true,
      /* 用于记录经营步骤改变情况*/
      isChangeRows: true,
      /* 趋势图表 */
      chartView: {},
      timeRestrict: {
        function: "absolute_time",
        params: [this.getBeforeDate(2), this.getBeforeDate()],
      }, // 动态时间参数
      startDate: this.getBeforeDate(2),
      endDate: this.getBeforeDate(),
      /* 视图类型 */
      state: "trends", // trends 趋势 | contrast 对比
      /* 点击初始事件显示框 */
      showInitEventGroup: false,
      /* 当前初始事件选择事件 */
      currentInitEventGroup: {
        eventId: "_Anything",
        cname: "任意事件",
        id: -1,
      },
      /* 初始事件数组 */
      initEventGroup: [],
      /* 初始事件详情数组 */
      initEventGroupDetail: [],
      /* 对比时选用的LTV类别 */
      contrastStep: DataTypeConfig.contrastStep,
      /* 当前选择的LTV类别 默认是当前LTV */
      currentContrastStep: 0,
      /* 用来渲染图表和列表的数据 */
      initChartViewData: {},
      // initChartViewData: {},
      /* 当前选择的营收事件 */
      ltvReportByValues: [],
      /* 当前选择的营收事件用于图表 */
      ltvReportByValuesChart: [],
      /* 窗口期 */
      winPeriod: ["", ""],
      /* 营收步骤数组 */
      revenueEventItems: [
        {
          key: "1",
          //是否显示这个营销步骤的事件类型筛选器
          act: false,
          //是否显示这个营销步骤的事件属性筛选器
          showAttribute: false,
          //是否展示百分比
          showPercentage: false,
          //当前营销事件的百分比
          percentage: 100,
          //当前营销事件的事件类型
          mes: { eventId: "_Anything", cname: "任意事件", id: -1 },
          //当前营销事件的属性
          attribute: {},
          //当前营销事件的属性组
          tabsHeadParams: [],
          //当前营销事件的属性值
          tabsBodyParams: [],
        },
      ],
      //按XXX查看选择器的属性组
      byXXXReadtabsHeadParams: ["事件属性", "用户属性", "用户分群", "用户标签"],
      //按XXX查看选择器的属性值
      byXXXReadtabsBodyParams: [],
      //当前按XXX查看的数值
      byXXXReadValues: { name: null, cname: "总体" },
      //当前按XXX查看的用户属性
      byXXXReadValuesUserProperties: [],
      //当前按XXX查看的事件属性
      byXXXReadValuesEventProperties: [],
      //是否展示按XXX查看选择器
      showbyXXXReadtabsBodyParams: false,
      /* 日期选择器，不能选择今天以后的日期 */
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
    };
  },
  watch: {
    currentContrastStep: function (val, oldval) {
      this.searchLtv();
    },
    currentInitEventGroup: function (val, oldval) {
      let t = this;
      let param = {
        req: {
          events: [val.eventId],
          type: "event",
          needEventTime: true,
        },
        operationCtx: {},
      };
      propertyList(param)
        .then((res) => {
          if (res.data.success !== true) {
            t.$message.error(res.data.errorMessage);
            return;
          }
          t.byXXXReadtabsBodyParams[0] = res.data.value;
          t.byXXXReadValuesEventProperties = res.data.value.list;
        })
        .catch((error) => {
          console.log("error = ", error);
        });
    },
    revenueEventItems: {
      handler: function (val, oldVal) {
        this.isChangeRows = !this.isChangeRows;
        if (this.isChangeRows === false) {
          this.doListenerRevenueEventItems();
        }
      },
      deep: true,
    },
  },
  methods: {
    //  追加对比 时间函数
    timeContrast(v) {
      let arr = [0, 0];
      // 同段时间
      if (v == "1") {
        let c = new Date(this.dateS[1]) - new Date(this.dateS[0]);
        arr[1] = new Date(this.dateS[0]) - 24 * 60 * 60 * 1000;
        arr[0] = arr[1] - c;
      }
      // 自定义时间
      if (v == "2") {
        arr[0] = new Date(this.dateS[0]) - 24 * 60 * 60 * 1000;
        arr[1] = new Date(this.dateS[1]) - 24 * 60 * 60 * 1000;
      }
      this.dateD = arr;
    },
    getBeforeDate(number) {
      let num = number;
      let date = new Date();

      let year = date.getFullYear();
      let mon = date.getMonth() + 1;
      let day = date.getDate();

      if (typeof num === "number") {
        if (day <= num) {
          if (mon > 1) {
            mon = mon - 1;
          } else {
            year = year - 1;
            mon = 12;
          }
        }

        date.setDate(date.getDate() - num);

        year = date.getFullYear();
        mon = date.getMonth() + 1;
        day = date.getDate();
      }

      return (
        year +
        "-" +
        (mon < 10 ? "0" + mon : mon) +
        "-" +
        (day < 10 ? "0" + day : day)
      );
    },
    dateSChange(newValue) {
      let { sendTimeArr, timeRestrict } = newValue;
      this.timeRestrict = timeRestrict;
      this.dateS = [sendTimeArr[0], sendTimeArr[1]];
      this.startDate = sendTimeArr[0];
      this.endDate = sendTimeArr[1];
      let contrastStartDate = null;
      let contrastEndDate = null;
      if (this.dateD && this.dateD[0]) {
        let date = new Date(this.dateD[0]);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        contrastStartDate = year + "-" + mon + "-" + day;
      }
      if (this.dateD && this.dateD[1]) {
        let date = new Date(this.dateD[1]);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        contrastEndDate = year + "-" + mon + "-" + day;
      }

      // this.$emit("conversion", {
      //   unit: this.unit,
      //   startDate,
      //   endDate,
      //   contrastStartDate,
      //   contrastEndDate,
      //   timeRestrict    // 动态时间配置集合
      // });
    },
    exportExcel() {
      this.$refs.exportExcel.exportExcel();
    },
    timeUnity(time) {
      this.winPeriod = time;
    },
    //点击外部时 关闭所有选择框
    handleClickOutSide(e) {
      // 当外部被点击时调用
      this.revenueEventItems.map((item) => {
        item.act = false;
        item.showAttribute = false;
      });
      this.showInitEventGroup = false;
      this.showbyXXXReadtabsBodyParams = false;
      this.$forceUpdate();
    },
    isShowPercentage(index) {
      this.revenueEventItems[index].showPercentage =
        !this.revenueEventItems[index].showPercentage;
      this.$forceUpdate();
    },
    /*默认昨天的时间*/
    initYestedayShowTime() {
      let timenow = new Date();
      timenow.setDate(timenow.getDate() - 1); //设置天数 -1 天，昨天的日期
      let y = timenow.getFullYear(); //年
      let m = timenow.getMonth() + 1; //月
      m = m < 10 ? "0" + m : m;
      let d = timenow.getDate(); //日
      d = d < 10 ? "0" + d : d;
      let yesterdayTime = y + "-" + m + "-" + d; //字符串拼接成自己想要的时间格式，现在是yyyy/mm/dd格式
      this.winPeriod = [yesterdayTime, yesterdayTime];
    },
    /* 获取 切换为用户属性时所需要的数据*/
    getBecomeVipTimeList() {
      let t = this;
      let param = {
        req: {
          events: ["_Anything"],
          type: "event",
          needEventTime: true,
        },
        operationCtx: {},
      };
      propertyList(param).then((res) => {
        if (res.data.success !== true) {
          t.$message.error(res.data.errorMessage);
          return;
        }
        let data_ = res.data.value.list;
        let userDefault = true;
        for (let i = 0; i < data_.length; i++) {
          if (data_[i].dataType === "datetime") {
            if (userDefault === true) {
              t.currentBecomeVipTimeValue = data_[i];
              userDefault = false;
            }
            t.becomeVipTimeList.push(data_[i]);
          }
        }
        this.$forceUpdate();
      });
    },
    //监听营销事件的变化
    doListenerRevenueEventItems() {
      let t = this;
      for (let i = 0; i < this.revenueEventItems.length; i++) {
        if (this.revenueEventItems[i].mes.name !== "") {
          let param = {
            req: {
              events: [t.revenueEventItems[i].mes.eventId],
              type: "event",
              needEventTime: true,
            },
            operationCtx: {},
          };
          propertyList(param)
            .then((res) => {
              if (res.data.success !== true) {
                t.$message.error(res.data.errorMessage);
                return;
              }

              t.revenueEventItems[i].tabsHeadParams = ["事件属性", "其他属性"];
              t.revenueEventItems[i].tabsBodyParams = [];
              let eventProperties = { list: [] };
              for (let j = 0; j < res.data.value.list.length; j++) {
                if (res.data.value.list[j].dataType === "number") {
                  eventProperties.list.push(res.data.value.list[j]);
                }
              }
              t.revenueEventItems[i].tabsBodyParams.push(eventProperties);
              t.revenueEventItems[i].tabsBodyParams.push({
                total: 1,
                list: [
                  {
                    dbColumnName: "things_times",
                    name: "things_times",
                    cname: "事件次数",
                    isMeasure: false,
                    dataType: "string",
                  },
                ],
              });
            })
            .catch((error) => {
              console.log("error = ", error);
            });
        }
      }
    },
    //监听营销事件的变化 取名字到ltvReportByValues里
    doLtvReportByValues() {
      this.ltvReportByValues = [];
      this.ltvReportByValuesChart = [];
      for (let i = 0; i < this.revenueEventItems.length; i++) {
        this.ltvReportByValues.push(this.revenueEventItems[i].mes.cname);
        this.ltvReportByValuesChart.push({
          name: this.revenueEventItems[i].mes.cname,
          icon: "rect",
        });
      }
    },
    //获取按XXX查看选择器的属性值 事件属性以及用户属性 以下三个方法
    doByXXXReadtabsBodyParams() {
      let events = ["_Anything"];
      let type = "event";
      let t = this;

      t.byXXXReadtabsBodyParams = [];
      this.doByXXXReadtabsBodyParamsEvent(events, type, t);
    },
    doByXXXReadtabsBodyParamsEvent(events, type, t) {
      let param = {
        req: {
          events: events,
          type: "event",
          needEventTime: true,
        },
        operationCtx: {},
      };
      propertyList(param)
        .then((res) => {
          if (res.data.success !== true) {
            t.$message.error(res.data.errorMessage);
            return;
          }
          t.byXXXReadtabsBodyParams.push(res.data.value);
          t.byXXXReadValuesEventProperties = res.data.value.list;
          type = "user";
          t.doByXXXReadtabsBodyParamsUser(events, type, t);
        })
        .catch((error) => {
          console.log("error = ", error);
        });
    },
    doByXXXReadtabsBodyParamsUser(events, type, t) {
      let param = {
        req: {
          events: events,
          type: type,
          needEventTime: true,
        },
        operationCtx: {},
      };
      propertyList(param)
        .then((res) => {
          if (res.data.success !== true) {
            t.$message.error(res.data.errorMessage);
            return;
          }
          t.byXXXReadtabsBodyParams.push(res.data.value);
          t.byXXXReadValuesUserProperties = res.data.value.list;
          t.byXXXReadtabsBodyParams.push({
            total: 1,
            list: [],
          });
          t.byXXXReadtabsBodyParams.push({
            total: 1,
            list: [],
          });
        })
        .catch((error) => {
          console.log("error = ", error);
        });
    },

    /* 搜索Ltv结果*/
    searchLtv() {
      //startSign 报文
      let startSign = this.getStartSign();

      //经营事件
      let measures = this.getMeasures();

      if (typeof measures === "boolean") {
        this.$message.warning("需选择营收事件对应的属性");
        return;
      }

      //用户筛选
      let filter = this.getFilter();

      //按xxx查看
      let byFields = this.getByFields();

      /*图表的数据索引数值 */
      let chartIndex = this.contrastStep[this.currentContrastStep].value;

      /*图表的类型 趋势|对比*/
      let chartType = this.state;

      let fromDate = this.startDate;

      let toDate = this.endDate;

      let param = {
        startSign: startSign,
        measures: measures,
        filter: filter,
        byFields: byFields,
        chartIndex: chartIndex,
        chartType: chartType,
        fromDate: fromDate,
        toDate: toDate,
        unit: "day",
      };

      let params = {
        req: param,
        operationCtx: {},
      };
      this.doLtvReportByValues();

      let t = this;

      t.isDoCompute = 1;
      t.icon = "el-icon-loading";
      t.backTimeNumber();

      ltvFunnel(params)
        .then((res) => {
          t.icon = "el-icon-search";
          if (res.data.success !== true) {
            t.$message.error(res.data.errorMessage);
            return;
          }

          t.initChartViewData = res.data.value;
          if (t.state === "trends") {
            t.ltvAnlaysisToEChartAndTableTrend();
          } else {
            t.ltvAnlaysisToEChartAndTableContrast();
          }
        })
        .catch((error) => {
          t.icon = "el-icon-search";
          console.log("error = ", error);
        });
    },
    /* 分析计算到倒计时*/
    backTimeNumber() {
      if (this.icon !== "el-icon-search") {
        if (this.backTime >= 0) {
          this.backTime--;
          setTimeout(this.backTimeNumber, 1000);
        } else {
          t.$message.error("计算超时");
        }
      } else {
        this.isDoCompute = 0;
        this.backTime = 60;
        return;
      }
    },
    /*获取传递给后台的byFields字段*/
    getByFields() {
      let prefix = "";
      for (let i = 0; i < this.byXXXReadValuesEventProperties.length; i++) {
        let item = this.byXXXReadValuesEventProperties[i];
        if (item.name === this.byXXXReadValues.name) {
          prefix = "event._Anything.";
        }
      }

      for (let i = 0; i < this.byXXXReadValuesUserProperties.length; i++) {
        let item = this.byXXXReadValuesUserProperties[i];
        if (item.name === this.byXXXReadValues.name) {
          prefix = "user.";
        }
      }
      if (prefix === "") {
        return;
      }
      return [prefix + this.byXXXReadValues.name];
    },
    getStartSign() {
      let startSign = {};
      if (this.isInitEvent === true) {
        startSign["startEvent"] = this.currentInitEventGroup.eventId;
        startSign["cname"] = this.currentInitEventGroup.cname;
        startSign["filters"] =
          this.$refs["customScreenRefInit"].getFilterConditions();
      } else {
        startSign["cname"] = this.currentBecomeVipTimeValue.cname;
        //start_time_field: "user.vip_time"
        startSign["startTimeField"] =
          "user." + this.currentBecomeVipTimeValue.name;
      }
      return startSign;
    },
    getMeasures() {
      let measures = [];
      for (let i = 0; i < this.revenueEventItems.length; i++) {
        let measuresItem = {};
        if (this.revenueEventItems[i].attribute.name === "things_times") {
          measuresItem["aggregator"] = "average";
        } else {
          measuresItem["aggregator"] = "LTV_AVG";
        }

        //选择的事件
        measuresItem["eventId"] = this.revenueEventItems[i].mes.eventId;

        //设置的百分比
        if (
          this.revenueEventItems[i].percentage !== 100 &&
          this.revenueEventItems[i].showPercentage
        ) {
          measuresItem["profitRate"] = this.revenueEventItems[i].percentage;
        }

        if (this.revenueEventItems[i].attribute.name === undefined) {
          return false;
        }
        //选择的属性
        measuresItem["field"] =
          this.revenueEventItems[i].attribute.name === "things_times"
            ? null
            : "event." +
              this.revenueEventItems[i].mes.eventId +
              "." +
              this.revenueEventItems[i].attribute.name;

        // 筛选情况
        measuresItem["filter"] =
          this.$refs["customScreenRef" + i][0].getFilterConditions();

        measures.push(measuresItem);
      }
      return measures;
    },
    /*获取分析的filter参数*/
    getFilter() {
      let filter = this.$refs["customScreenRefUser"].getFilterConditions();
      return filter;
    },
    /* 选择属性 */
    choAttributeEnd(mes, attribute) {
      if (mes.key === "byXXXRead") {
        this.byXXXReadValues = attribute;
        this.revenueEventItems.map((item) => {
          if (item.key === mes.key) {
            item.showAttribute = false;
          }
        });
        this.showbyXXXReadtabsBodyParams = false;
      } else {
        this.revenueEventItems.map((item) => {
          if (item.key === mes.key) {
            item.attribute = attribute;
            item.showAttribute = false;
          }
        });
      }
    },
    /* 添加营收事件 */
    addLtvAnalysisEvent() {
      this.revenueEventItems.push({
        key: this.revenueEventItems.length + 1,
        act: false,
        showAttribute: false,
        showPercentage: false,
        percentage: 100,
        mes: { eventId: "_Anything", cname: "任意事件", id: -1 },
        attribute: {},
      });
    },
    /* 删除营收事件 */
    remvnoCond(i) {
      // 移除筛选条件
      if (typeof i === "number") {
        for (let j = i; j < this.revenueEventItems.length - 1; j++) {
          this.$refs["customScreenRef" + j] =
            this.$refs["customScreenRef" + (j + 1)];
        }
        this.$refs["customScreenRef" + (this.revenueEventItems.length - 1)] =
          null;
        this.revenueEventItems.splice(i, 1);
        this.$forceUpdate();
      }
    },
    /* 用户筛选条件 */
    editCondInit() {
      this.$refs["customScreenRefInit"].editCond();
    },
    /* 用户筛选条件 */
    editCondUser() {
      this.$refs["customScreenRefUser"].editCond();
    },
    /* 添加筛选条件 */
    editCond(i) {
      this.$refs["customScreenRef" + i][0].editCond();
    },
    /* 视图类型切换 */
    stateChange() {
      this.searchLtv();
    },
    /* 选择初始事件结束 */
    choInitEventEnd(res) {
      if (res.origin.key !== undefined) {
        this.choList(res);
      } else {
        this.currentInitEventGroup = res.mes;
        this.choInitEvent();
      }
    },
    /* 选择初始事件展示下拉框 */
    choInitEvent() {
      this.showInitEventGroup = !this.showInitEventGroup;
      this.revenueEventItems.map((item) => {
        item.act = false;
      });
    },
    /* 点击对比 */
    ltvAnlaysisToEChartAndTableContrast() {
      let t = this;
      // 基于准备好的dom，初始化echarts实例
      this.chartView = this.$echarts.init(document.getElementById("chart"));

      let chartBottomValues = [];

      if (this.byXXXReadValues.cname === "总体") {
        if (this.initChartViewData.rows.length === 1) {
          chartBottomValues.push({
            name:
              this.revenueEventItems[0].mes.cname +
              "的" +
              this.revenueEventItems[0].attribute.cname,
            icon: "rect",
          });
        } else {
          for (let i = 0; i < this.initChartViewData.rows.length; i++) {
            let byValue = this.initChartViewData.rows[i].byValue;
            if (byValue === "$ALL") {
              chartBottomValues.push({ name: "总营收", icon: "rect" });
            } else {
              chartBottomValues.push({
                name:
                  this.revenueEventItems[i - 1].mes.cname +
                  "的" +
                  this.revenueEventItems[i - 1].attribute.cname,
                icon: "rect",
              });
            }
          }
        }
      } else {
        for (let i = 0; i < this.initChartViewData.rows.length; i++) {
          let byValue = this.initChartViewData.rows[i].byValue;
          if (byValue === undefined) {
            chartBottomValues.push({ name: "未知", icon: "rect" });
          } else {
            chartBottomValues.push({ name: byValue, icon: "rect" });
          }
        }
      }

      let option = {
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: "horizontal",
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: "center",
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: "bottom",
          data: chartBottomValues,
        },
        grid: {
          top: "16%", // 等价于 y: '16%'
          left: "3%",
          right: "8%",
          bottom: "16%",
          containLabel: true,
        },
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: true,
          data: [],
        },

        yAxis: {
          name: "数值",
          type: "value",
          splitNumber: 9, // 设置y轴刻度间隔个数
        },
        series: [],
      };

      if (this.byXXXReadValues.cname === "总体") {
        //设置x轴下标
        for (
          let xx = 0;
          xx < this.initChartViewData.rows[0].subRows.length;
          xx++
        ) {
          //需要大于对比中选择的LTV 类别等级
          if (
            this.initChartViewData.rows[0].subRows[xx].cells.length >
            this.currentContrastStep
          ) {
            option.xAxis.data.push(
              this.initChartViewData.rows[0].subRows[xx].byValue
            );
          }
        }
        //循环每一行的数据信息
        for (let i = 0; i < this.initChartViewData.rows.length; i++) {
          let rowItem = this.initChartViewData.rows[i];
          //一行的模板
          let seriesItem = {
            name: option.legend.data[i].name,
            data: [],
            type: "line",
            // 设置折线上圆点大小
            symbolSize: 6,
            symbol: "circle",
          };
          //一行数据中的每一个点
          for (let j = 0; j < rowItem.subRows.length; j++) {
            let rowColumnItem = rowItem.subRows[j];
            if (rowColumnItem)
              if (rowColumnItem.cells.length === 0) {
                if (this.currentContrastStep === 0) {
                  seriesItem.data.push("");
                }
              } else {
                if (rowColumnItem.cells.length > this.currentContrastStep) {
                  seriesItem.data.push(
                    rowColumnItem.cells[this.currentContrastStep].amount
                  );
                }
              }
          }
          option.series.push(seriesItem);
        }
      } else {
        //设置x轴下标
        for (
          let xx = 0;
          xx < this.initChartViewData.rows[0].subRows[0].subRows.length;
          xx++
        ) {
          //需要大于对比中选择的LTV 类别等级
          if (
            this.initChartViewData.rows[0].subRows[0].subRows[xx].cells.length >
            this.currentContrastStep
          ) {
            option.xAxis.data.push(
              this.initChartViewData.rows[0].subRows[0].subRows[xx].byValue
            );
          }
        }

        //循环每一行的数据信息
        for (let i = 0; i < this.initChartViewData.rows.length; i++) {
          let rowItem = this.initChartViewData.rows[i];
          //一行的模板
          let seriesItem = {
            name: option.legend.data[i].name,
            data: [],
            type: "line",
            // 设置折线上圆点大小
            symbolSize: 6,
            symbol: "circle",
          };
          //一行数据中的每一个点
          for (let j = 0; j < rowItem.subRows[0].subRows.length; j++) {
            let rowColumnItem = rowItem.subRows[0].subRows[j];
            if (rowColumnItem)
              if (rowColumnItem.cells.length === 0) {
                if (this.currentContrastStep === 0) {
                  seriesItem.data.push("");
                }
              } else {
                if (rowColumnItem.cells.length > this.currentContrastStep) {
                  seriesItem.data.push(
                    rowColumnItem.cells[this.currentContrastStep].amount
                  );
                }
              }
          }
          option.series.push(seriesItem);
        }
      }

      this.chartView.clear();
      this.chartView.setOption(option);
      this.$forceUpdate();
    },
    /* 点击趋势 */
    ltvAnlaysisToEChartAndTableTrend() {
      // 基于准备好的dom，初始化echarts实例
      if (this.initChartViewData.rows === undefined) return;
      this.chartView = this.$echarts.init(document.getElementById("chart"));
      let t = this;

      let chartBottomValues = [];
      if (this.byXXXReadValues.cname === "总体") {
        if (this.initChartViewData.rows.length === 1) {
          chartBottomValues.push({
            name:
              this.revenueEventItems[0].mes.cname +
              "的" +
              this.revenueEventItems[0].attribute.cname,
            icon: "rect",
          });
        } else {
          for (let i = 0; i < this.initChartViewData.rows.length; i++) {
            let byValue = this.initChartViewData.rows[i].byValue;
            if (byValue === "$ALL") {
              chartBottomValues.push({ name: "总营收", icon: "rect" });
            } else {
              chartBottomValues.push({
                name:
                  this.revenueEventItems[i - 1].mes.cname +
                  "的" +
                  this.revenueEventItems[i - 1].attribute.cname,
                icon: "rect",
              });
            }
          }
        }
      } else {
        for (let i = 0; i < this.initChartViewData.rows.length; i++) {
          let byValue = this.initChartViewData.rows[i].byValue;
          if (byValue === undefined) {
            chartBottomValues.push({ name: "未知", icon: "rect" });
          } else {
            chartBottomValues.push({ name: byValue, icon: "rect" });
          }
        }
      }

      let option = {
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: "horizontal",
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: "center",
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: "bottom",
          data: chartBottomValues,
        },
        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: "16%", // 等价于 y: '16%'
          left: "3%",
          right: "8%",
          bottom: "16%",
          containLabel: true,
        },
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: true,
          data: [],
        },

        yAxis: {
          name: "数值",
          type: "value",
          splitNumber: 9, // 设置y轴刻度间隔个数
        },
        series: [],
      };
      //设置x轴下标
      for (let i = 0; i < this.initChartViewData.rows[0].cells.length; i++) {
        if (i === 0) {
          option.xAxis.data.push("LTV 当天");
        } else if (i < 8) {
          option.xAxis.data.push("LTV " + i);
        } else if (i === 8) {
          option.xAxis.data.push("LTV 15");
        } else if (i === 9) {
          option.xAxis.data.push("LTV 30");
        } else if (i === 10) {
          option.xAxis.data.push("LTV 60");
        } else if (i === 11) {
          option.xAxis.data.push("LTV 90");
        }
      }

      if (this.byXXXReadValues.cname === "总体") {
        //循环每一行的数据信息
        for (let i = 0; i < this.initChartViewData.rows.length; i++) {
          let rowItem = this.initChartViewData.rows[i];
          //一行的模板
          let seriesItem = {
            name: option.legend.data[i].name,
            data: [],
            type: "line",
            // 设置折线上圆点大小
            symbolSize: 6,
            symbol: "circle",
          };
          //一行数据中的每一个点
          for (let j = 0; j < rowItem.cells.length; j++) {
            let rowColumnItem = rowItem.cells[j];
            seriesItem.data.push(rowColumnItem.amount);
          }
          option.series.push(seriesItem);
        }
      } else {
        //循环每一行的数据信息
        for (let i = 0; i < this.initChartViewData.rows.length; i++) {
          let rowItem = this.initChartViewData.rows[i].subRows[0];
          //一行的模板
          let seriesItem = {
            name: option.legend.data[i].name,
            data: [],
            type: "line",
            // 设置折线上圆点大小
            symbolSize: 6,
            symbol: "circle",
          };
          //一行数据中的每一个点
          for (let j = 0; j < rowItem.cells.length; j++) {
            let rowColumnItem = rowItem.cells[j];
            seriesItem.data.push(rowColumnItem.amount);
          }
          option.series.push(seriesItem);
        }
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartView.clear();
      this.chartView.setOption(option);

      this.$forceUpdate();
    },
    /* 选择漏斗步骤时回调 */
    choList(mes) {
      this.revenueEventItems.map((item) => {
        if (item.key === mes.origin.key) {
          item.mes = mes.mes;
          item.act = false;
        }
      });
    },
    cho(mes, type) {
      if (type === 0) {
        /* 关闭初始事件选项框*/
        if (this.showInitEventGroup === true) {
          this.showInitEventGroup = false;
        }
        if (mes.act === false) {
          this.revenueEventItems.map((item) => {
            //全部赋值为false
            item.act = false;
            item.showAttribute = false;
          });
          mes.act = true;
        } else {
          this.revenueEventItems.map((item) => {
            item.act = false;
          });
        }
      } else if (type === 1) {
        if (mes.showAttribute === false) {
          this.revenueEventItems.map((item) => {
            //全部赋值为false
            item.act = false;
            item.showAttribute = false;
          });
          mes.showAttribute = true;
        } else {
          this.revenueEventItems.map((item) => {
            item.showAttribute = false;
          });
        }
      }
    },
    //获取事件分组和所有事件类型
    getThinglData() {
      let t = this;
      let params = {
        req: {
          appId: JSON.parse(window.sessionStorage.getItem("appItem")).appId,
        },
        operationCtx: {},
      };
      thinglGroup(params).then((res) => {
        if (res.data.success !== true) {
          t.$message.error(res.data.errorMessage);
          return;
        }
        res.data.value[0].mateEventList.unshift({
          eventId: "_Anything",
          eventName: "任意事件",
          productCode: "dx",
        });
        t.initEventGroup = res.data.value;
      });
      thinglList(params).then((res) => {
        if (res.data.success !== true) {
          t.$message.error(res.data.errorMessage);
          return;
        }
        res.data.value.list.unshift({
          appId: 1,
          cname: "任意事件",
          id: -1,
          eventId: "_Anything",
        });
        t.initEventGroupDetail = res.data.value.list;
      });
    },
    /* 图表大小自适应 */
    autoChart() {
      // 重新渲染图表
      this.chartView.resize();
    },
  },
  beforeCreate() {},
  created() {
    this.getThinglData();
    this.getBecomeVipTimeList();
    this.initYestedayShowTime();
  },
  beforeMount() {},
  mounted() {
    this.doListenerRevenueEventItems();
    this.doByXXXReadtabsBodyParams();
    this.$nextTick(() => {
      // 监听 window 窗口变化，自适应图表
      window.addEventListener("resize", this.autoChart);
    });
  },
  computed: {},
};
</script>

<style scoped lang="scss">
.lineHeader {
  text-align: center;
  height: 32px;
  line-height: 36px;
  font-size: 14px;
  margin: 10px;
  display: flex;

  /*::v-deep .el-button {*/
  /*    !*height: 32px;*!*/
  /*    !*line-height: 32px;*!*/
  /*    display: flex;*/
  /*    align-items: center;*/
  /*}*/
}

.diglog_box {
  .dialog {
    position: relative;

    .save_config {
      width: 100%;

      .line {
        width: 99%;
        margin: 0rem auto 0.1rem;
        display: flex;
        justify-content: space-between;

        .left {
          width: 20%;
          height: 100%;
          text-indent: 0.12rem;
          height: 0.8rem;
          letter-spacing: 2px;
          // font-size: 14px;
          font-size: 0.22rem;
          display: flex;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          align-items: center;
        }

        .right {
          height: 100%;
          width: 80%;
          min-height: 1rem;
          display: flex;
          align-items: center;

          .type_ech {
            cursor: pointer;
            min-width: 1rem;
            // height: 0.8rem;
            min-height: 0.8rem;
            padding: 0 0 2px 0;
            display: inline-block;
            margin: 0 0.2rem 0 0;
            // font-size: 10px;
            font-size: 0.1rem;
            text-align: center;
            border-radius: 4px;
            border: 1px solid rgba($color: #8492a6, $alpha: 0.3);
            color: rgba($color: #8492a6, $alpha: 0.9);
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;

            .txt {
              width: 100%;

              i {
                font-size: 0.26rem;
              }

              .size {
                display: inline-block;
                width: 90%;

                .box {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-evenly;
                  padding: 0.05rem 0;

                  .s,
                  .m,
                  .b {
                    border-radius: 2px;
                    border: 1px solid rgba($color: #8492a6, $alpha: 0.3);
                  }

                  .s {
                    width: 44%;
                    height: 0.2rem;
                  }

                  .m {
                    width: 44%;
                    height: 0.48rem;
                  }

                  .b {
                    width: 90%;
                    height: 0.5rem;
                  }
                }

                .boxs {
                  height: 0.3rem;
                }

                .boxm {
                  height: 0.5rem;
                }

                .boxb {
                  height: 0.5rem;
                }

                .activeSize {
                  background: rgba($color: #8492a6, $alpha: 0.2);
                  border: 1px solid rgba($color: #8492a6, $alpha: 0);
                }
              }
            }

            .iconCheck {
              position: absolute;
              top: 0;
              right: 0;
              width: 0;
              height: 0;
              border-bottom: 26px solid transparent;
              border-right: 26px solid rgba($color: #01b27a, $alpha: 0.8);
            }

            .el-icon-check {
              position: absolute;
              top: 2px;
              right: 2px;
              color: white;
            }
          }

          .type_ech:hover {
            border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
            color: rgba($color: #01b27a, $alpha: 0.8);
          }

          .active {
            border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
            color: rgba($color: #01b27a, $alpha: 0.8);
          }

          .type_ech_size {
            margin-top: 0.2rem;
            width: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            padding-top: 0.02rem;
          }
        }

        .big {
          height: 2rem;
        }
      }

      .lineSize {
        margin: 0.2rem auto;
      }

      .el_input {
        width: 100%;
      }
    }
  }
}

.app {
  padding: 6px 10px;
  height: 34px;
  line-height: 20px;
  min-width: 60px;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
  border-radius: 3px;
}

.step-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /*&:hover {*/
  /*    .click1 {*/
  /*        box-shadow: 0px 0px 10px;*/
  /*    }*/
  /*}*/
}

.click1 {
  height: 23px;
  line-height: 23px;
  border: 1px solid #dcdfe6;
  width: 200px;
  margin-left: 10px;
  text-indent: 6px;
  color: #bbb;
  position: relative;
  cursor: pointer;

  span {
    width: 200px;
    margin-right: 10px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    cursor: pointer;
    color: black;

    span:hover {
      overflow: visible;
    }
  }

  div {
    display: flex;
    align-items: center;
  }
}

::v-deep .show_hidden {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: -0.2rem;
  z-index: 10;
}

.crumbs_arr_box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tool_main {
    padding: 0 0.5rem 0 10px;
    font-size: 12px;
    font-weight: 500;
    color: #606266;
    // line-height: 44px;
    letter-spacing: 2px !important;

    .select {
      margin: 0 6px;
    }

    .fgf {
      display: inline-block;
      width: 1px;
      height: 16px;
      background: #c0c4cc;
      margin: 0 8px;
    }

    .tool_son {
      font-size: 16px;
      margin: 0 8px;
      font-size: 0.26rem;
    }

    .save {
      display: inline-block;
      font-size: 0.22rem;
      color: #007aff;
      height: 0.3rem;
      font-weight: 500;
      line-height: 0.3rem;
      margin-right: 0.1rem;

      i {
        font-size: 0.26rem;
      }
    }

    .tool_son:hover {
      color: #01b27a;
      font-weight: 600;
    }
  }
}

.block_tool {
  width: 98%;
  margin: 2px auto;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;

  .left {
    display: inline-block;
    width: 30%;
  }

  .right {
    display: inline-block;
    width: 70%;
  }

  .end {
    font-size: 14px;
    font-weight: 600;

    .btn_c {
      margin-right: 20px;
      font-weight: 400;
      font-size: 10px;
    }

    .btn_s {
      font-weight: 400;
      font-size: 10px;
      color: #f2f6fc;
      background: rgba($color: #01b27a, $alpha: 0.8);
      padding: 4px 10px;
      border-radius: 4px;
    }

    .btn_c:hover {
      color: #01b27a;
      font-weight: 500;
      font-size: 12px;
    }
  }
}

.ltvAnalysis::-webkit-scrollbar {
  display: none;
}

.ltvAnalysis {
  width: 98% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  height: 98.6% !important;
  overflow: scroll;
}

.filterBox,
.contentBox {
  padding: 10px 15px 0px 15px;
  /*padding:10px 15px;*/
  background-color: #ffffff;
  border-radius: 5px;
  margin: 15px 0;
  box-shadow: 0 2px 11px rgba(190, 202, 218, 0.17);
}

/* 筛选项区 */
.filterBox {
  .viewFunnelBox {
    border-bottom: 1px solid #e7e7e7;
    position: relative;

    .title-size {
      display: inline-block;
      width: 80px;
      padding: 0 10px;
      text-align: right;
    }

    .el-select {
      margin-right: 10px;
    }
  }

  .viewFunnelBoxLast {
    position: relative;

    .title-size {
      display: inline-block;
      width: 80px;
      padding: 0 10px;
      text-align: right;
    }

    .el-select {
      margin-right: 10px;
    }
  }

  .funnelSettingBox {
    border-left: 2px solid #6fd3b3;
    padding: 5px 0 5px 97px;
    position: relative;

    &:hover {
      background-color: #fafafa;
    }

    ::v-deep input[type="number"] {
      padding-right: 0;
    }

    .el-select {
      margin-right: 10px;
    }

    .size {
      padding-right: 5px;
    }

    .betweenBox,
    .datetimeBox {
      display: inline-block;
    }
  }

  i.el-icon-delete {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;

    &:hover {
      color: rgb(247, 86, 94);
    }
  }

  .andOrNotBox,
  .lineBox {
    position: absolute;
    top: 50%;
  }

  /* 且或非 */
  .andOrNotBox {
    width: 26px;
    height: 26px;
    font-size: 12px;
    text-align: center;
    line-height: 26px;
    border: 1px solid #cccccc;
    background-color: #fafafa;
    border-radius: 3px;
    cursor: pointer;
    z-index: 10;
    transform: translate(46px, -50%);
  }

  .lineBox {
    width: 26px;
    border: 1px solid #cccccc;
    border-right: none;
    transform: translate(60px, -50%);
    z-index: 5;
  }

  /* 设置筛选条件 */
  .settingCondition {
    padding: 10px 10px 0 100px;
  }
}

.childFilterBox {
  padding: 10px 0 15px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e7e7e7;

  .winPeriodBox {
    margin-left: 20px;
    float: left;

    .title {
      float: right;
      font-size: 12px;

      p {
        margin: -2px 0 -2px 10px;
      }

      p:nth-child(1) {
        color: #cccccc;
      }
    }
  }

  .el-radio-group {
    float: left;
  }

  .el-range-editor.el-input__inner {
    padding: 0 10px;
  }

  ::v-deep .el-range-editor--mini .el-range__close-icon {
    display: none;
  }

  ::v-deep .el-range-editor--mini .el-range-separator {
    line-height: 25px;
  }

  /* 对比选项 */
  .contrastFunnelBox {
    font-size: 12px;
    display: inline-block;
    padding: 0 10px;

    .vs {
      padding: 0 5px;
      font-size: 14px;
      font-weight: bold;
    }
  }
}

/* 营收事件步骤 */
.steps {
  padding: 6px 0px 6px;
  width: 100%;
  position: relative;
  height: auto;

  .step-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    /*&:hover {*/
    /*    background-color: #f9fcfe;*/

    /*    .click1 {*/
    /*        box-shadow: 0px 0px 10px;*/
    /*    }*/
    /*}*/
  }

  .click1 {
    height: 23px;
    line-height: 23px;
    border: 1px solid #dcdfe6;
    width: 200px;
    margin-left: 10px;
    text-indent: 6px;
    color: #bbb;
    position: relative;
    cursor: pointer;

    span {
      width: 200px;
      margin-right: 10px;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
      cursor: pointer;
      color: black;

      span:hover {
        overflow: visible;
      }
    }

    div {
      display: flex;
      align-items: center;
    }
  }

  i {
    position: absolute;
    right: 10px;
    font-size: 14px;
    height: 5px;
  }
}
</style>
